<template>
	<view class="content">
		<view class="">
			<view class="header">
				<image src="../static/images/refund-bg.png" class="bgImg" mode=""></image>
				<view class="context">
					<view class="title">
						可提现金额
					</view>
					<view class="balance">
						{{balance}}<text class="lockMoney" v-if="lockMoney">{{lockMoney}}</text><text class="lockText">提现中</text>
					</view>
				</view>
			</view>
		</view>
		<view class="oprater">
			<view class="label">
				提现金额
			</view>
			<view class="inputCon">
				<input type="digit" @input="accountChange" :value="withdraw" />
			</view>
		</view>
		<view class="oprater">
			<view style="font-size: 14px;color: #ff6600;">当前手续费为：{{totalrate | moneyFilter}}</view>
		</view>

		<view class="changetype">
			<radio-group @change="radioChange">
				<view class="typeBox">
					<view class="alipay" style="margin-right: 10px;">
						<radio :value="2+''" color="#ee5b25" :checked="paychecktype == 2" />微信
					</view>
					<view class="alipay" style="margin-right: 10px;">
						<radio :value="3+''" color="#ee5b25" :checked="paychecktype == 3" />支付宝
					</view>
					<view class="wx">
						<radio :value="1+''" color="#ee5b25" :checked="paychecktype == 1" />银行卡
					</view>
				</view>
			</radio-group>
		</view>
		<view class="oprater" v-show="paychecktype == 1">
			<view class="label">
				银行卡
			</view>
			<view class="inputCon">
				<picker @change="bindPickerChange" :value="cardIndex" :range="cards" mode='selector'>
					<view class="cardSelect">{{cards[cardIndex]}}</view>
				</picker>
			</view>
		</view>
		<view class="oprater">
			<view class="label">
				支付密码
			</view>
			<view class="inputCon">
				<input type="password" @input="pwdChange" placeholder="请输入支付密码" :value="payPwd" />
			</view>
		</view>
		<view class="confirmBtm" @click="confirm">
			确认提现
		</view>
		<view>
			<block v-if="turnovers.length">
				<view class="withItem" v-for="(item,index) in turnovers" :key="index">
					<view class="firstRow">
						<view class="cardName">
							{{item.bankName}}
						</view>
						<view class="account">
							{{item.money}}
						</view>
						<view class="status">
							{{item.cashSatusText}}
						</view>
					</view>
					<view class="firstRow">
						<view class="timer">
							{{item.createTime}}
						</view>
						<view class="cardNo">
							{{item.accNo}}
						</view>
					</view>
				</view>
			</block>
			<!-- <empty v-else emptyText="暂无提现记录"></empty> -->
		</view>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	import {
		userBanlace,
		userBankCard,
		userInfo
	} from "@/common/loadUserInfo.js"

	export default {
		components: {

			empty
		},
		data() {
			return {
				totalrate: '',
				cashRateList: [],
				paychecktype: 2,
				balance: 1510,
				payPwd: '',
				withdraw:'',
				turnovers: [],
				activeColor: '#ab89fe',
				lockMoney: 0,
				cards: [],
				cardIndex: 0,
				cardObjs: null,
				userDetail: {},
			};
		},
		watch: {
			'withdraw': {
				handler: function(val) {
					let that = this;
					let leftMoney = val,
						totalFee = 0
					that.cashRateList.forEach(item => {
						let money = leftMoney - item.startMoney
						if (money > 0) {
							totalFee += money * item.rate
							leftMoney -= money
						}
					})
					that.totalrate = totalFee
				}
			},
		},
		onLoad() {
			
			this.loadCards()
			this.loadBanlace()
		},
		onShow(){
			var that = this;
			userInfo({
				success: (res) => {
					that.userDetail = res.data.userinfo
					uni.setStorageSync('userDetail', that.userDetail)
				},
				fail: (err) => {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}
			})
		},
		methods: {
			
			radioChange(e) {
				this.paychecktype = e.detail.value
				// this.immediately(this.paychecktype)
				if (this.paychecktype == 1) {
					if (this.cardObjs.length == 0) {

						this.$api.msg('暂未添加银行卡，前往添加')
						setTimeout(() => {
							uni.navigateTo({
								url: '/subPackage/bankCard/bankCard'
							})
						}, 500)
					}
				}
			},
			accountChange(e) {
				this.withdraw = parseFloat(e.detail.value)
			},
			pwdChange(e) {
				this.payPwd = e.detail.value
			},
			// 校验提现
			checkFn(){
				if(this.userDetail.is_verified == 0){
					return uni.showModal({
						title: '提示',
						content: '您未实名认证，请前往实名认证后再提现',
						success: (res)=> {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/real'
								})
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					})
				}
				if(!this.userDetail.payPwd){
					return uni.showModal({
						title: '提示',
						content: '您未设置支付密码，请先设置密码',
						success: (res)=> {
							if (res.confirm) {
								uni.navigateTo({
									url: '/subPackage/payPwd/payPwd?type=reset'
								})
							} else if (res.cancel) {
							}
						}
					})
				}
				if (!this.withdraw) {
					return this.$api.msg('请输入提现金额')
				}
				if (!this.payPwd) {
					return this.$api.msg('请输入支付密码！')
				}
				return true;
			},
			confirm() {
				if(this.checkFn() !== true){
					return false;
				}
				let that = this;
				let defaultprice = 0;
				let param = {}
        let accId
        if(this.cardObjs.length == 0){
					accId = 0
				}else{
					accId = this.cardObjs[this.cardIndex].id
				}
				
				if (this.paychecktype == 1) {
					  param.accId = accId,
						param.money = this.withdraw,
						param.payPwd = this.payPwd,
						param.pay_type = this.paychecktype
				} else {
					param.accId = 0
					param.money = this.withdraw,
						param.payPwd = this.payPwd,
						param.pay_type = this.paychecktype
				}
				// let leftMoney = param.money,
				// 	totalFee = 0
				// that.cashRateList.forEach(item => {
				// 	let money = leftMoney - item.startMoney
				// 	if (money > 0) {
				// 		totalFee += money * item.rate
				// 		leftMoney -= money
				// 	}
				// })
				// that.totalrate = totalFee
				that.$Request.request('/api/user_center/cashDrawAdd', 'POST', param).then(res => {
					if (res.status == 1) {
						console.log('1')
						that.$api.msg('提现申请提交成功！')
						setTimeout(() => {
							that.loadCards()
							that.loadBanlace()
						}, 500)
					}

				}).catch(err => {
					console.log(err)
				})
			},
			loadCards() {
				let that = this
				userBankCard({
					success(res) {

						let cards = res.data
						that.cardObjs = cards
						cards.forEach(item => {
							let cardWord = `${item.bankName}:${item.accNo}`
							that.cards.push(cardWord)
						})
					}
				})
			},
			bindPickerChange(e) {
				this.cardIndex = e.detail.value
			},
			loadBanlace() {
				let that = this
				userBanlace({
					success: (res) => {
						that.balance = parseFloat(res.data.userMoney)
						that.lockMoney = parseFloat(res.data.lockMoney)
						// that.withdraw = that.balance - that.lockMoney
						that.cashRateList = res.data.cashRateList
						that.loadList()
					}
				})

			},
			loadList() {
				let that = this
				that.$Request.request('/api/user_center/cashDrawLog', 'GET', {}).then(res => {
					if (res.status == 1) {
						that.turnovers = res.data
					}
				}).catch(err => {
					console.log(err)
				})
			},
			itemClick(item) {
				this.$api.msg(item.remark)
			}
		}
	}
</script>
<style>

</style>
<style lang="scss">
	page {
		height: 100%;
	}

	.content {
		min-height: 100%;
		background-color: #f8f8f8;
	}

	.confirmBtm {
		@include textCenter(80rpx);
		letter-spacing: 0.2em;
		font-size: $uni-font-size-lg;
		width: 600rpx;
		margin: 40rpx auto;
		background-color: $themColor;
		color: #fff;
		border-radius: 10rpx;
	}

	.withItem {
		width: 710rpx;
		padding: 26rpx;
		border-radius: 8rpx;
		box-shadow: 0 0 5rpx rgba($themColor, 0.6);
		font-size: $uni-font-size-sm;
		margin: 20rpx auto 0 auto;

		.firstRow {
			@extend %flexBetw;
			height: 60rpx;
		}
	}

	.header {
		height: 260rpx;
		position: relative;
		@extend %flexAlCenter;
		margin-bottom: 30rpx;
		clear: both;

		.bgImg {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 2;
		}

		.context {
			color: #fff;
			z-index: 2;

			.title {
				font-size: $uni-font-size-base;
				@include textCenter(40rpx)
			}

			.balance {
				font-size: 40rpx;

				@include textCenter(80rpx) .lockMoney {
					padding: 0 26rpx;
					font-size: $uni-font-size-lg;

					&::before {
						content: '￥';
					}
				}

				.lockText {
					font-size: $uni-font-size-lg;
				}
			}
		}
	}

	.changetype {
		display: flex;
		padding: 15px;
		font-size: 28upx;

		.typeBox {
			display: flex;
			align-items: center;

			.wx {
				display: flex;
				align-items: center;
				margin-right: 30upx;

				.uni-radio-wrapper {
					.uni-radio-input {
						width: 30upx;
						height: 30upx;
						box-sizing: border-box;
					}
				}
			}

			.alipay {
				display: flex;
				align-items: center;

				.uni-radio-input {

					width: 30upx;
					height: 30upx;
					box-sizing: border-box;
				}
			}
		}
	}

	.oprater {
		padding: 30rpx 50rpx;
		@extend %flexBetw;

		.label {
			z-index: 2;
			font-size: $uni-font-size-sm;
			color: $uni-text-color;
		}

		.inputCon {
			z-index: 2;
			height: 55rpx;
			width: 500rpx;
			background-color: #F8F8F8;
			border-bottom: 1rpx solid $uni-border-color;

			.cardSelect {
				font-size: 22rpx;
			}
		}
	}
</style>
